<template>
  <div>
    <el-dialog
      :title="bannerInfo.isAdd ? '添加轮播图' : '修改轮播图'"
      :visible.sync="bannerInfo.isShow"
      :before-close="cancel"
      center
    >
      <el-form :model="bannerForm" :rules="rules" ref="bannerForm">
        <el-form-item prop="title" label="标题" :label-width="formLabelWidth">
          <el-input v-model="bannerForm.title" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="图片" :label-width="formLabelWidth" prop="img">
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :file-list="fileList"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-change="onChange"
            :on-exceed="handleExceed"
            :limit="1"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>

        <el-form-item label="状态" label-width="120px" prop="status">
          <el-form-item>
            <el-switch
              v-model="bannerForm.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="2"
            >
            </el-switch>
          </el-form-item>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { banneradd, banneredit, bannerinfo } from "../../require/api";
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      bannerForm: {
        title: "", //名称
        img: "", //图片(文件，一般用于二级分类)
        status: 1, //状态1正常2禁用
      },
      //规则验证
      rules: {
        title: [
          { required: true, message: "请输入标题名称", trigger: "blur" },
          { min: 2, max: 7, message: "长度在 2 到 7 个字符", trigger: "blur" },
        ],
      },
      formLabelWidth: "120px",
      dialogImageUrl: "",
      dialogVisible: false,
      // 上传图片文件列表
      fileList: [],
    };
  },
  props: ["bannerInfo"],
  methods: {
    ...mapActions({
      bannerAction: "banner/bannerAction",
    }),
    //上传文件个数限制
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },

    //文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      console.log(file, "文件");
      console.log(fileList, "文件列表");
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 图片上传变化
    onChange(file, fileList) {
      console.log(file.raw, "文件");
      console.log(fileList, "文件列表");
      //给img 赋值
      this.bannerForm.img = file.raw;
      console.log(this.bannerForm.img);
      // console.log(this.bannerForm.img);
    },
    //清空
    reset() {
      this.bannerForm = {
        title: "", //名称
        img: "", //图片(文件，一般用于二级分类)
        status: 1, //状态1正常2禁用
      };
      //   验证清空
      this.$refs.bannerForm.resetFields();
      //清空上传图片文件
      this.fileList = [];
    },
    // 取消事件
    cancel() {
      this.$emit("cancel", false);
      this.reset();
    },

    // 数据回显
    lookup(id) {
      // 请求一条数据
      bannerinfo({ id }).then((res) => {
        if (res.code == 200) {
          console.log(res);
          this.bannerForm = res.list;
          // 图片回显
          this.fileList = this.bannerForm.img
            ? [{ url: "http://localhost:3000" + this.bannerForm.img }]
            : [];
          this.bannerForm.id = id;
        }
      });
    },
    // 确认
    confirm() {
      this.$refs.bannerForm.validate((valid) => {
        if (valid) {
          // console.log(this.bannerForm);
          // 新增
          if (this.bannerInfo.isAdd) {
            console.log(this.bannerInfo.isAdd);
            banneradd(this.bannerForm).then((res) => {
              if (res.code == 200) {
                // 成功提示
                this.$message.success(res.msg);
                // 关闭弹窗
                this.cancel();
                // 更新页面
                this.bannerAction();
                // this.$store.dispatch("banner/bannerAction");
              } else {
                // 失败提示
                this.$message.error(res.msg);
              }
            });
          } else {
            // 修改编辑
            banneredit(this.bannerForm).then((res) => {
              console.log(this.bannerForm);
              if (res.code == 200) {
                // 成功提示
                this.$message.success(res.msg);
                // 关闭弹窗
                this.cancel();
                // 更新页面
                this.bannerAction();
                // this.$store.dispatch("banner/bannerAction");
              } else {
                // 失败提示
                this.$message.error(res.msg);
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  computed: {
    ...mapState("banner", ["bannerList"]),
  },
  mounted() {
    this.bannerAction();
  },
};
</script>
<style lang=less scoped >
</style>
